// Form

.form-control {
  border-radius: $input-border-radius;
  box-shadow: none;

  &:focus {
    border-color: $form-control-hover-border;
  }
}

.form-horizontal {
  .form-footer {
    margin-bottom: 15px;
    text-align: center;

    > button + button {
      margin-left: 20px;
    }
  }
}

// validation states
.has-success {
  .checkbox,
  .checkbox-inline,
  .control-label,
  .help-block,
  .radio,
  .radio-inline,
  label {
    color: $form-control-success-color;
  }

  .form-control {
    border-color: $form-control-success-border;
    &:focus {
      border-color: darken($form-control-success-border, 5%);
    }
  }
}

.has-error {
  .checkbox,
  .checkbox-inline,
  .control-label,
  .help-block,
  .radio,
  .radio-inline,
  label {
    color: $form-control-danger-color;
  }

  .form-control {
    border-color: $form-control-danger-border;
    &:focus {
      border-color: darken($form-control-danger-border, 5%);
    }
  }
}

.input-field-group {
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.input-field {
  display: block;
  width: 100%;
  height: $input-height;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid $input-border;
  background-color: #fff;

  &:focus:not([readonly]) {
    outline: none;
    border-bottom-color: $success-color;
    box-shadow: 0 1px 0 0 $success-color;

    + label {
      color: $success-color;
    }
  }

  + label {
    position: absolute;
    top: 7px;
    left: 0;
    margin-bottom: 0;
    cursor: text;
    color: $input-color;
    transition: .2s ease-out;
  }

  + label.active {
    font-size: 12px;
    font-weight: 400;
    transform: translateY(-140%);
  }
}

.input-field-group.has-error {
  .input-field {
    border-bottom-color: $danger-color;
    box-shadow: 0 1px 0 0 $danger-color;

    + label {
      color: $danger-color;
    }
  }
}